65<template>
  <!-- 雷达图 -->
  <div ref="radarChart" style="width: 100%; height: 100%"></div>
</template>

<script>
// 引入ECharts主模块
import * as echarts from "echarts";

export default {
  name: "RadarChart",
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const chartDom = this.$refs.radarChart;
      const myChart = echarts.init(chartDom);
      const indicator = [
        { name: "身份信息", max: 1000 },
        { name: "履历信息", max: 1000 },
        { name: "社会关系", max: 1000 },
        { name: "个人爱好", max: 1000 },
        { name: "设备信息", max: 1000 },
        { name: "行为轨迹", max: 1000 },
        { name: "无风险", max: 1000 },
      ];

      const dataArr = [
        {
          value: [782, 712, 523, 756, 722, 694, 685],
          name: "个人行为泄露",
          itemStyle: {
            color: "#FA9D47",
            opacity: 0.8,
            borderWidth: 1,
            borderColor: "#FA9D47",
          },
          lineStyle: {
            color: "#FA9D47",
          },
          areaStyle: {
            // 单项区域填充样式
            color: "#FA9D47",
            opacity: 0.5, // 区域透明度
          },
        },
        {
          value: [628, 360, 365, 362, 388, 402, 362],
          name: "互联网泄露",
          itemStyle: {
            color: "#0496FF",
            opacity: 0.8,
            borderWidth: 1,
            borderColor: "#0496FF",
          },
          lineStyle: {
            color: "#0496FF",
          },
          areaStyle: {
            // 单项区域填充样式
            color: "#0496FF",
            opacity: 0.5, // 区域透明度
          },
        },
      ];

      let option = {
        // backgroundColor: "#0e2147",
        color: ["#FA9D47", "#0496FF", "#00FBFF"],
        tooltip: {
          backgroundColor: "rgba(3, 9, 24,1)",
          textStyle: {
            color: "rgba(255, 255, 255, 1)",
          },
        },
        // 图例
        legend: {
          orient: "horizontal",
          icon: "rectangle",
          data: ["互联网泄露", "个人行为泄露"],
          top: 5,
          left: 0,
          itemWidth: 14, // 图例标记的图形宽度。
          itemHeight: 14, // 图例标记的图形高度。
          itemGap: 21, // 图例每项之间的间隔
          textStyle: {
            fontSize: 14,
            color: "#fff",
          },
        },
        grid: {
          top: 20,
          left: 5,
          right: 0,
          bottom: 0,
          containLabel: true,
        },
        radar: {
          radius: ["0", "65%"],
          center: ["50%", "50%"], // 图表的位置 x,y方向
          axisName: {
            color: "#fff",
            fontSize: 16,
          },
          splitNumber: 1,
          indicator: indicator,
          splitArea: {
            show: true,
            areaStyle: {
              color: ["rgba(255,255,255,0.1)", "rgba(255,255,255,0.2)"], // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
            },
          },
          axisLine: {
            lineStyle: {
              color: "#ffffff",
              opacity: 0.1,
            },
          },
          splitLine: {
            lineStyle: {
              color: "#fff", // 分隔线颜色
              opacity: 0.4,
              width: 3, // 分隔线线宽
              shadowColor: "#0496FF",
              // shadowColor: 'red', // 背景阴影
              shadowBlur: 10,
              shadowOffsetY: 15,
            },
          },
        },
        series: [
          {
            type: "radar",
            symbolSize: 8,
            // symbol: 'angle',
            data: dataArr,
          },
        ],
      };
      myChart.setOption(option);
    },
  },
};
</script>
